<template>
  <div class="my-user">
    <!-- 顶部导航 -->
    <TopNav />

    <!-- 使用布局组件 -->
    <SidebarLayout
      :menuItems="menuItems"
      sidebarTitle="我的京东"
      @item-click="handleMenuClick"
    >
      <!-- 右侧内容区域 -->
      <div class="user-content">
        <router-view />
      </div>
    </SidebarLayout>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SidebarLayout from '../../components/layout/SidebarLayout.vue';
import TopNav from './components/TopNav.vue';

// 定义菜单项
const menuItems = ref([
  { id: 1, text: '订单中心', path: '/user/orders' },
  { id: 2, text: '代下单', path: '/user/wallet' },
  { id: 3, text: '关注的商品', path: '/user/account' },
  { id: 4, text: '收货地址', path: '/user/address' },
  { id: 5, text: '优惠券', path: '/user/coupons' },
  { id: 6, text: '我的活动', path: '/user/activities' },
    { id: 7, text: '默认', path: '/user/default' },
]);

// 处理菜单点击事件（如果需要额外逻辑）
const handleMenuClick = (item) => {
  console.log('菜单项点击:', item);
  // 可以在这里添加额外的逻辑
};
</script>

<style scoped lang="scss">
.my-user {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .user-content {
    height: 100%;
  }
}
</style>
